<template>
    <div class="home">
        <div class="container">
            <router-view @changeIndex="changeIndex" @tabDisappear="disappear"/>
        </div>
        <van-tabbar v-model="active" active-color="#22c196" @change="tabChange" v-if="tabShow">
            <van-tabbar-item icon="bag">{{$t('home.tab')}}</van-tabbar-item>
            <!-- <van-tabbar-item icon="upgrade">{{$t('activate.title')}}</van-tabbar-item> -->
            <van-tabbar-item icon="cluster">{{$t('ecology.title')}}</van-tabbar-item>
            <van-tabbar-item icon="info">{{$t('ecology.info')}}</van-tabbar-item>
            <van-tabbar-item icon="manager">{{$t('my.title')}}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import {mapGetters, mapMutations} from 'vuex'
    export default {
        data(){
            return{
                active:0,
                tabShow:true
            }
        },
        methods:{
            ...mapMutations({
                setToken: 'SET_TOKEN',
                setUser:'SET_USER'
            }),
            changeIndex(num){
                console.log(num)
                // this.active = num
            },
            disappear(data){
                this.tabShow = data
            },
            tabChange(data){
                console.log(data)
                switch (data) {
                    case 0:
                        this.$router.push('/home/paid')
                        break;
                    case 1:
                        this.$router.push('/home/ecology')
                         this.active = data
                        break;
                    case 2:
                        this.$router.push('/home/news')
                        this.active = data
                        break;
                     case 3:
                        this.$router.push('/home/privates')
                        this.active = data
                        break;
                }
            },

        },
        computed:{
            ...mapGetters([
                'user',
                'token'
            ]),
        },
        created() {
            if(!localStorage.user){
                this.$router.push({ path: '/login' })
            }else{
                this.$router.push('/home/paid')
                this.setUser(JSON.parse(localStorage.user))
                this.setToken(localStorage.token)
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .container{
        padding-bottom: 60px;
        font-size: 14px;
    }
    .van-tabbar{
        background:#fff
        z-index 20!important
        border-top 1px solid #ccc
    }
    .van-tabbar-item{
        color #b6b6b6
    }
    [class*=van-hairline]::after{
        border: none;
    }
</style>
